<template>
  <div class="container">
    <div class="process" v-for="(proItem,proIndex) in process" :key="proIndex">
      <div class="process-item" :class="proItem.processStatus == 1 ? 'process-item1' : ''">
        <div class="process-item-title" :class="proIndex == process.length -1 ? 'process-item-title1' : ''">
          {{ proItem.processName }}
        </div>
        <div class="flex flex-around process-item-content">
          <div class="flex flex-center flex-wrap process-item-content-list"
               @click="proItem.processStatus==1 &&gotoPagesFunc(proIndex, proItem.processId)"
               v-for="(item, index) in proItem.children" :key="item.id">
            <img class="process-item-content-list-img"
                 :src="item.processStatus == 0 ? imgUrl[index].durl : imgUrl[index].surl" alt="">
            <div class="process-item-content-list-name"
                 :class="proItem.children.length == 2 ? 'process-item-content-list-name1': ''">{{ item.processName }}
            </div>
          </div>
        </div>
        <div class="process-item-btn" v-if="proIndex < process.length -1">
          <van-button type="success"
                      size="large" style="height:100%;"
                      :color="proItem.processStatus == 1?'#42DDA2':'#c8c7c7'"
                      @click="gotoPagesFuncCheck(proIndex, proItem.processId,proItem.processStatus)">进入流程
          </van-button>
        </div>
      </div>
      <div class="process-down" v-if="proIndex < process.length -1"><img src="../assets/down.png" alt=""></div>
    </div>
  </div>
</template>

<script>
import {queryProcess} from '@/api/index.js'

export default {
  name: '',
  data() {
    return {
      process: [],
      userId: '',
      userType: '',
      imgUrl: [
        {
          durl: require("../assets/jc1.png"),
          surl: require("../assets/jc.png")
        },
        {
          durl: require("../assets/zl1.png"),
          surl: require("../assets/zl.png")
        },
        {
          durl: require("../assets/team1.png"),
          surl: require("../assets/team.png")
        }
      ]
    }
  },
  created() {
    this.userId = this.$route.query.userid;
    console.log('this.userId', this.userId)
    this.userType = JSON.parse(sessionStorage.getItem('userInfo')).userType;
    this.queryProcessFunc();
  },
  methods: {
    // 查询用户流程数据
    queryProcessFunc() {
      queryProcess('userId=' + this.userId).then(res => {
        console.log('process', res.data)
        this.process = res.data;
      })
    },
    gotoPagesFuncCheck(index, processId, status) {
      if (status == 0) {
        this.$toast('当前还未进入此流程，请先完成之前流程');
        return
      }
      this.gotoPagesFunc(index, processId)
    },
    // 点击跳转到功能页面
    gotoPagesFunc(index, processId) {
      let pathUrl = this.userType == 0 ? '/zlwork' : '/patient';
      let pathUrl1 = this.userType == 0 ? '/fzDoctorWorkbench' : '/fzpatient';
      switch (index) {
        case 0:
          this.$router.push({path: '/hospitalInfo', query: {userid: this.userId, processid: processId}});
          break;
        case 1:
          this.$router.push({path: '/mindReview', query: {userid: this.userId, processid: processId}});
          break;
        case 2:
          this.$router.push({path: '/hlplan', query: {userid: this.userId, processid: processId}});
          break;
        case 3:
          this.$router.push({path: pathUrl, query: {userid: this.userId, processid: processId}});
          break;
        case 4:
          this.$router.push({path: pathUrl1, query: {userid: this.userId, processid: processId}});
          break;
        case 5:
          this.$router.push({path: '/hospitalManage', query: {userid: this.userId, processid: processId}});
          break;
        case 6:
          // this.$router.push({path: ''});
          break;
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: auto;
  padding: 40px 15px;
  margin-bottom: 0 !important;
}

.process-item {
  width: auto;
  height: auto;
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #FDFDFD;
  border: 1px solid #E7EAEF;
}

.process-item1 {
  background-color: #EEFFF8;
  border: 1px solid #42DDA2;
}

.process-item-title {
  width: 100%;
  height: auto;
  color: #02B16E;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 18px;
}

.process-item-title1 {
  margin-bottom: 0;
}

.process-item-content {
  widows: auto;
  height: auto;
}

.process-item-content-list {
  width: auto;
  height: auto;
}

.process-item-content-list-img {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  vertical-align: top;
  overflow: hidden;
}

.process-item-content-list-name {
  width: 90px;
  height: auto;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-item-content-list-name1 {
  width: 120px;
}

.process-item-btn {
  width: 100%;
  height: 36px;
  margin-top: 20px;
}

.process-down {
  width: 12px;
  height: 15px;
  margin: 12px auto;
}

.process-down img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
</style>
